//所有的css都基本上以这个开头  所搞成common
*{
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}
// 宽高背景色混合宏混合宏  不调用不生成  用@include name 调用
@mixin whb($h:100%,$w:100%,$b:#f6f6f6){
    height: $h;
    width: $w;
    background: $b;
}
//弹性布局相关混合宏  参数：1.是否开启弹性  2.子元素排列方向 横向  3.主轴对齐方式 居中  4.交叉轴对齐方式 居中
@mixin flex($switch:flex){
    display:$switch;
}
html,body{
    @include whb();
}
.container{
    @include whb();
    @include flex();
    flex-direction: column;
}